import React, { useEffect, useState } from 'react';
import { history, connect } from 'umi';
import { Card, Avatar, Divider, Descriptions, Space, Typography, Button, Popover, Row, Col } from 'antd';
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';
import AnsweringAccountSetting from './components/AnsweringAccountSetting'
import SeatMapModal from './components/SeatMapModal';
import UpdateAnswerUser from './components/UpdateAnswerUser';
import EditSubmit from './components/editSubmit';
import './index.less'
const { Title, Text } = Typography;
const AnsweringCard = (props) => {

    const tabList = [
        {
            key: '0',
            tab: '答疑设置',
        },
        {
            key: '1',
            tab: '排版日历',
        },
    ];
    const [activeTabKey, setActiveTabKey] = useState('0');
    const onTabChange = (key) => {
        setActiveTabKey(key);
    };
    // const content = {
    //     0: <AnsweringAccountSetting></AnsweringAccountSetting>
    // }[activeTabKey]
    // return <Card
    //     bordered={false}
    //     tabList={tabList}
    //     activeTabKey={activeTabKey}
    //     style={{ width: '100%' }}
    //     onTabChange={onTabChange}>

    //     {content}
    // </Card>
    return <AnsweringAccountSetting {...props}></AnsweringAccountSetting>
}
const AnsweringAccountDetail = (props) => {
    const { history = {}, dispatch } = props
    const { location = {} } = history
    const { query = {} } = location
    const { id, } = query
    const [visible2, setVisible2] = useState(false);
    const [visible, setVisible] = useState(false);
    const [formVisible, setFormVisible] = useState(false);
    const { Meta } = Card;
    const [data, setData] = useState({})
    const { teacher = {}, teacherQaConfigList = [] } = data
    const { profile, adminName, remark, adminMobile, teacherName } = teacher
    const fetchData = () => {
        dispatch({
            type: 'answering/fetchTeacherDetail',
            payload: {
                id,
            },
            callback: (e) => {
                console.log(e)
                setData(e)
            },
        })
    }
    useEffect(() => {
        fetchData()
    }, [])
    const
        DescriptionsRender = (props) => {
            const { title, value = {}, formItems = [] } = props
            return <Descriptions {...props} title={<Title level={4}>{title}</Title>}>
                {formItems.map((item, index) => {
                    const { label, name, render } = item
                    if (render) {
                        return <Descriptions.Item labelStyle={{ fontSize: 14 }} contentStyle={{ fontSize: 14 }} key={index} label={<Text level={3}>{label}</Text>}>{render(value[name], value)}</Descriptions.Item>
                    }
                    return <Descriptions.Item labelStyle={{ fontSize: 14 }} contentStyle={{ fontSize: 14 }} key={index} label={<Text level={3}>{label}</Text>}>{value[name] ? value[name] : '--'}</Descriptions.Item>
                })}
            </Descriptions>
        }
    const formItem = [
        {
            label: '员工姓名',
            name: 'adminName',
        },
        {
            label: '上课学科',
            name: 'subjectNames',
        },
        {
            label: '上架状态',
            name: 'status',
            render: (e) => {
                return {
                    0: '已下架',
                    1: '已上架'
                }[e]
            }
        },
        {
            label: '简介内容',
            name: 'description',
        },

    ]
    const btnList = [

        {
            name: '排班',
            click: () => {
                setVisible2({
                    show: true,
                    detail: {
                        teacherScheduleList: [{ weekDays: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }],
                    },

                })
            }
        },
        {
            name: '编辑信息',
            click: () => {
                const { subjectIds = '', tagIds = '', recommendedHomeRecruitment, recommendedHomeTeacher } = teacher
                setVisible({
                    show: true,
                    detail: {
                        ...teacher,
                        subjectIds: subjectIds.length ? subjectIds.split(',').map(val => { return Number(val) }) : [],
                        tagIds: tagIds.length ? tagIds.split(',').map(val => { return Number(val) }) : []
                    }
                })
            }
        },
    ]
    return <Card
        title='基本信息'
        extra={<Button type='link' onClick={() => { history.goBack() }}>返回列表</Button>}
    >
        <Row gutter={[24, 24]} >
            <Col style={{ fontSize: 14 }} span={18}>
                <div style={{ display: 'flex', alignItems: 'center' }}>
                    <Avatar src={profile} />
                    <div style={{ marginLeft: 12 }}>
                        <div>{teacherName}</div>
                        <div style={{ marginTop: 8, color: '#999999' }}>{adminMobile}</div>
                    </div>
                </div>
            </Col>
            <Col span={6}>
                <Space style={{ marginTop: 8, marginLeft: 'auto' }}>
                    {btnList.map(item => {
                        const { name, click, show = true } = item
                        if (show) {
                            return <Button type='primary' onClick={() => click()}>{name}</Button>
                        }
                        return null
                    })}
                </Space>
            </Col>
            <Col span={24}>
                <DescriptionsRender border column={3} formItems={formItem} value={teacher}></DescriptionsRender>
            </Col>
            {/* <SeatMapModal></SeatMapModal> */}
            <Divider />
            <AnsweringCard fetchData={fetchData} teacherId={id} data={data}></AnsweringCard>
        </Row>

        <EditSubmit teacherId={id} handleCallback={fetchData} visible={visible2} onClose={() => { setVisible2(false) }}></EditSubmit>
        <UpdateAnswerUser handleCallback={fetchData} visible={visible} onClose={() => { setVisible(false) }}></UpdateAnswerUser>
    </Card >
}
export default connect(({ subscriber, loading }) => ({
    loading: loading.effects['subscriber/fetchUserDetail'],
}))(AnsweringAccountDetail);